<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }
  </style>
</head>

<body>
  <div id="box">
    box
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
  </div>

  <ul>
    <li>1</li>
    <li>2</li>
    <li class="li">3</li>
    <li>4</li>
    <li>5</li>
  </ul>

</body>

<script>
  //DOM 中的标签 都有一种包含(父子) 或者并列 (兄弟)的关
  //通过关系去查找相对于的 元素
  // 父子关系
  // 通过父亲找孩子
  //他是 dom的属性  通过备选元素的属性  查找关系
  //children 获取所有孩子集合  是类数组形式, 这个最常用.
  //childNode  获取 孩子的 所有节点  包括 换行 空格 ,

  //children 和  firstElementChild lastElementChild previousElementSibling nextElementSibling 获取的是有意义的标签(元素 ) 最常用
  var divParent = document.getElementById('box');
  console.dir(divParent);
  console.log(divParent.children); //获取所有孩子节点 不包含 换行 空格
  console.log(divParent.childNodes); //获取所有孩子节点 包含 换行 空格
  //页面中  第一个元素 和最后一个元素特殊
  //
  // firstElementChild  lastElementchlid;获取父元素的 第一个孩子(元素节点   标签节点) 和最后一个孩子(元素节点  标签节点)

  console.log(divParent.firstElementChild);
  console.log(divParent.lastElementChild);
  //  firstChild lastChild  获取父元素的所有节点  包括文本 换行符 空格
  console.log(divParent.firstChild);
  console.log(divParent.lastChild);


  //通过子元素找父元素
  //通过子元素.parentNode 的方式获取父元素
  var box2 = document.querySelector('.box2');
  console.log(box2.parentNode);


  //通过指定元素  寻找兄弟
  // el.previousElemnetSibling 上一个兄弟
  // el.nextElementSibling下一个
  var ul = document.querySelector('ul')
  console.log(ul.childNodes);
   var  liEle = document.querySelector('ul .li');

  console.log(liEle.previousElementSibling);//获取指定元素 的上一个兄弟元素(标签节点)
  console.log(liEle.nextElementSibling);//获取指定元素 的下一个兄弟元素(标签节点)
  console.log(liEle.previousSibling);//获取指定元素 的上一个兄弟元素(包含  空格换行符 文本)
  console.log(liEle.nextSibling);//获取指定元素 的下一个兄弟元素(包含  空格换行符 文本)


  //兼容性问题
  //ie9以下 previousSibling   他直接获取的也是元素节点 =previousElementSibling
  //  liEle.previousElementSibling || liEle.previousSibling 用这样的方式 兼容低级和高级浏览器

  //ie9 以下 firstChild 获取的值  = firstElementChild
  //liEle.firstElementChild || liEle.firstChild


  //无法获取 自己之外的所有兄弟
  //通过父亲找孩子的方式  获取所有li
  //获取所有孩子
  var lis = ul.children;
  for(var i=0;i<lis.length;i++){
    if(lis[i] != liEle){
      console.log(lis[i]);
    }
  }
</script>

</html>